export default {
  name: 'FTable',
  props: {
    dataSource: {
      default: () => []
    },
    columns: {
      default: () => []
    },
  },
  created() {
  },
  components: {
    FColumns: {
      name: 'FColumns',
      created() {
      },
      render() {
        const { children, parentSlot, ...other } = this.$attrs
        return children?.length
          ? <el-table-column {...{ attrs: other }}>{
            children.map(child => {
              return <FColumns parentSlot={parentSlot} {...{ attrs: child }} />
            })}
          </el-table-column>
          : <el-table-column
            {...{ attrs: other }}
            scopedSlots={{
              default: parentSlot[other.prop]
                ? (props) => {
                  return parentSlot[other.prop]({ ...props })
                }
                : undefined
            }}
          >
          </el-table-column>
      }
    }
  },
  render() {
    const { ...tableProps } = this.$attrs
    const { ...events } = this.$listeners
    return (
      <el-table
        data={this.dataSource}
        border
        style="width: 100%"
        {...{ attrs: tableProps, on: events }}
      >
        {
          this.columns.map(column => {
            const { ...other } = column
            return (<FColumns
              parentSlot={this.$scopedSlots}
              {...{ attrs: other }}
            >
            </FColumns>)
          })
        }
      </el-table>
    )
  }
}
